<template>
    <div>
        <h2>常用功能</h2>
        <div class="visial">
            <div style="display: flex;">
                <div class="visial1">
                    <p><el-icon>
                            <Histogram />
                        </el-icon>订单列表</p>
                    <p><b>&gt;</b></p>
                </div>
                <div class="visial1">
                    <p><el-icon><Avatar /></el-icon>用户列表</p>
                    <p><b>&gt;</b></p>
                </div>
            </div>
            <div style="display: flex;">
                <div class="visial1">
                    <p><el-icon>
                            <HomeFilled />
                        </el-icon>首页配置</p>
                    <p><b>&gt;</b></p>
                </div>
                <div class="visial1">
                    <p><el-icon>
                            <PictureFilled />
                        </el-icon>主题配置</p>
                    <p><b>&gt;</b></p>
                </div>
            </div>
            <div style="display: flex;">
                <div class="visial1">
                    <p><el-icon>
                            <Menu />
                        </el-icon>活动管理</p>
                    <p><b>&gt;</b></p>
                </div>
                <div class="visial1">
                    <p><el-icon>
                            <Tools />
                        </el-icon>退款申请</p>
                    <p><b>&gt;</b></p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Histogram, HomeFilled, PictureFilled, Tools,Avatar,Menu } from '@element-plus/icons-vue';
</script>

<style scoped lang="scss">
h2 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
}

.visial {
    width: 100%;
    height: 90%;

    .visial1 {
        width: 47%;
        margin: 10px;
        height: 80px;
        border-radius: 10px;
        background-color: #fafafc;
        display: flex;
        justify-content: space-between;
        line-height: 80px;

        p {
            font-size: 20px;
            color: #999;

            .el-icon {
                margin-right: 10px;
            }

            b {
                font-size: 30px;
                color: #999;
                font-weight: 100;
            }
        }
    }
}
</style>
